(function () {
    axios.defaults.baseURL = 'http://124.223.14.236:3001/api';
    let pageNum = 1; // 页码数
    let isFinished = false; // 是否结束了，没有更多数据了，不需要滚动了
    let isLoading = false;

    // =========================>发生请求
    async function getAjaxList() {
        isLoading = true;
        document.querySelector('.list-box').innerHTML +=
            '<p class="more" id="loading">数据正在加载中...</p>';
        const { data } = await axios.get('/recipe',
            {
                params: {
                    pageSize: 12,
                    pageNum,
                }
            }).finally(function () {
                isLoading = false;
                const loadingDOM = document.getElementById('loading');
                loadingDOM.parentNode.removeChild(loadingDOM);
            });
        const list = data.data.list;
        if (list.length === 0) {
            isFinished = true;
            document.querySelector('.list-box').innerHTML +=
                '<p class="noinfo" >没有数据了...</p>';
        } else {
            pageNum++;
            renderMenuList(list);
        }


    }
    getAjaxList();

    // =========================>渲染列表
    function renderMenuList(menuList) {
        const listStr = menuList
            .map((item, index) => {
                let { img, name, id } = item;
                const reImg = 'http://124.223.14.236:3001/public/' + img;
                return `
            <li>
              <a href="./food_info.html?id=${id}">
                <img src=${reImg} alt="" />
                <h3 title="${name}">${name}</h3>
              </a>
            </li>
          `;
            })
            .join('');
        document.querySelector('.list-box ul').innerHTML += listStr;
    }

    //=========================>下拉加载
    window.addEventListener('scroll', function () {
        if (isLoading) return; // 数据正在加载中，跳出
        if (isFinished) return; // 数据没有了，跳出

        const reachBottom =
            window.scrollY + window.innerHeight >=
            document.documentElement.offsetHeight - 10;
        if (!reachBottom) return; // 没有滚动到底
        // 滚动到底了，要请求更多数据了
        getAjaxList();
    });
})();